<template>
<div class="login">
    <span class="iconfont" id="fangh" @click="fanh">&#xe641;</span>
    <div class="login-top">

        <h2 class="h2">欢迎登录 时代🐖</h2>
        <div class="wenbk">
            <input type="text" placeholder="请输入手机号" v-model="desc"><br>
            <div class="a"></div>
            <input type="password" placeholder="请输入密码" v-model="mima"><br>
            <div class="a"></div>
            <input class="ym" type="text" placeholder="请输入验证码">
            <div class="a"></div>
            <span class="yanzm">获取验证码</span>
            <div class="a"></div>
            <div class="desc">未注册的手机号验证后自动创建时代猪账户</div>

        </div>
        <button class="dingru" @click="denglu">立即登录</button>

    </div>
    <div class="login-buttom">
        <div class="kuaijie">
            <div class="yuanq"> <span class="iconfont">&#xe62b;</span></div>
            <div class="yuanq"> <span class="iconfont" @click="yijianweix">&#xe61a;</span></div>
        </div>
        <div class="desc1"> 登录注册代表你已同意 <span>《用户协议》</span> 和 <span>《隐私政策》</span></div>
    </div>
    <div class="xinx" ref="xinx">{{xinx}}</div>
    <div class="xinx1" ref="xinx1">{{xinx1}}</div>
    <div class="show" v-show="show">
        <div>是否保存账号密码</div>
        <span @click="no">no</span>
        <span @click="yes">yes</span>
    </div>

</div>
</template>

<script>
export default {
    name: 'login',
    data() {
        return {
            show: false,
            xinx1: "手机号码不得大于或少于11位,请重新输入",
            xinx: "输入错误，请重新输入",
            desc: localStorage.a,
            mima: sessionStorage.b,
            desc1: [{
                    shouj: "1234564545",
                    mima: "123456789"
                },
                {
                    shouj: "1434564545",
                    mima: "123456565"
                },
                {
                    shouj: "12345644455454",
                    mima: "123456445"
                },
                {
                    shouj: "12345678911",
                    mima: "12345678911"
                },
                {
                    shouj: "12345678910",
                    mima: "12345678910"
                }

            ]

        }
    },
    mounted() {
        // localStorage.removeItem("b") //删除永久存储的键B
    },
    methods: {
        no() {
            this.show = false
            this.$router.push('/wode')

        },
        yes() {
            this.show = false
            this.$router.push('/wode')
            localStorage.a = this.desc
            sessionStorage.b = this.mima

        },

        yijianweix() {
            this.$store.commit("loginSuccess");
            this.$router.push('/wode')
            localStorage.islogin = true
        },
        fanh() {
            this.$router.push("/")

        },
        denglu() {
            let desc3 = this.desc
            let desc4 = this.mima
            let a = []
            let b = []
            for (let item = 0; item < this.desc1.length; item++) {
                let a1 = this.desc1[item].shouj
                let b1 = this.desc1[item].mima
                a.push(a1)
                b.push(b1)
            }
            // if (/^[a-zA-Z]+$/ && desc3.length > 10 < 12) {
            if (desc3.length == 11) {
                // let de = de.indexOf(this.desc1[i].shouj).substr(0, 1)
                // let mi = mi.indexOf(this.desc1[i].mima).substr(0, 1)
                if (a.indexOf(desc3) > -1 && b.indexOf(desc4) > -1) {
                    this.$store.commit("loginSuccess");
                    localStorage.ingi = true
                    localStorage.islogin = true
                    // localStorage.ing = true
                    // localStorage.setItem("islogin", true)
                    console.log(this.$store.state.islogin)

                    this.show = true
                } else {
                    let xinx = this.$refs.xinx
                    setTimeout(function () {
                        xinx.style = "display:block"

                    }, 500)
                    setTimeout(function () {
                        xinx.style = "display:none"
                        console.log(xinx.style)
                    }, 2000)

                }
            } else {
                let xinx1 = this.$refs.xinx1
                setTimeout(function () {
                    xinx1.style = "display:block"

                }, 500)
                setTimeout(function () {
                    xinx1.style = "display:none"

                }, 2000)
            }
            // else {
            //     setTimeout(function () {
            //         this.show = true
            //     }, 2000)
            // }

        }
    },
}
</script>

<style scoped>
.login {
    overflow: hidden;
    width: 100%;
    height: 0px;
    padding-bottom: 178%;
    position: relative;
    background-color: #fff;
    z-index: 500;

}

#fangh {
    position: absolute;
    left: 8px;
    top: 30px;
}

.login-top {
    position: relative;
    top: 90px;
    left: 20px;
    width: 100%;
}

.h2 {
    font-size: 25px;
    font-weight: bold;
}

.wenbk {
    position: absolute;
    top: 60px;
    left: 8px;
    width: 100%;
}

.wenbk input {
    width: 100%;
    padding-left: 6px;

}

.a {
    width: 85%;
    height: 0.8px;
    background-color: rgba(163, 160, 160, 0.425);
    margin-bottom: 10px;
    margin-top: 10px;
}

.yanzm {
    color: chocolate;
    position: absolute;
    top: 65%;
    left: 66%;
}

.desc {
    font-size: 5px;

}

.dingru {
    width: 85%;
    height: 35px;
    font-size: 20px;
    position: absolute;
    top: 230px;
    left: 10px;
    border-radius: 30px;
    background-color: chocolate;
    color: black;

}

.login-buttom {
    position: absolute;
    bottom: 10%;
    left: 6%;

}

.kuaijie {
    width: 80%;
    position: absolute;
    bottom: 30px;
    text-align: center;

}

.yuanq {
    display: inline-block;
    margin-left: 25%;
    width: 40px;
    height: 40px;
    border: #aaa solid 0.5px;
    border-radius: 35px;
}

.yuanq span {
    font-size: 25px;
    position: relative;
    top: 7px;
}

.desc1 span {
    color: chocolate;
}

.xinx,
.xinx1 {
    width: 60%;
    height: 20px;
    background-color: rgb(36, 32, 32);
    color: cornsilk;
    position: absolute;
    bottom: 30%;
    left: 20%;
    border-radius: 10px;
    padding-top: 7px;
    text-align: center;
    font-size: 10px;
    display: none;
}

.ym {
    margin-bottom: -10px;
}

.show {
    position: fixed;
    top: 50%;
    left: 25%;
    height: 70px;
    width: 200px;
    background-color: rgb(211, 210, 210);
    text-align: center;
}

.show div {
    margin: 10px 0px 20px;
}

.show span {
    display: inline-block;
    width: 50px;
    height: 18px;
    background-color: rgb(196, 72, 72);
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 2px;
}
</style>
